<template>
  <div class="procurement-system">
    <!-- 顶部导航栏 -->
    <el-row class="header">
      <el-col :span="24">
        <el-menu mode="horizontal" router>
          <el-menu-item index="/workbench">工作台</el-menu-item>
          <el-menu-item index="/procurement">采购管理</el-menu-item>
          <el-menu-item index="/project">项目采购管理</el-menu-item>
          <el-menu-item index="/settlement">业务结算管理</el-menu-item>
          <el-menu-item index="/contract">合同管理</el-menu-item>
          <el-menu-item index="/supplier">供应商管理</el-menu-item>
          <el-menu-item index="/data">整车业务主数据管理</el-menu-item>
          <el-menu-item index="/report">报表中心</el-menu-item>
          <el-menu-item index="/system">系统管理</el-menu-item>
          <el-menu-item index="/logout" @click="logout">退出</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <!-- 主体内容 -->
    <el-row class="main-content">
      <el-col :span="4" class="left-sidebar">
        <el-menu default-active="1" class="left-menu" router>
          <el-menu-item index="/workbench">
            <i class="el-icon-s-home"></i>
            <span slot="title">工作台</span>
          </el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="20" class="right-content">
        <!-- 待办事项 -->
        <el-row class="pending-matters">
          <el-col :span="24">
            <div class="title">待办事项</div>
            <div class="update-time">更新时间：2022-12-31 14:25:25</div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card shadow="hover" class="pending-card">
                  <div class="card-content">
                    <i class="el-icon-s-order"></i>
                    <span>待办事项</span>
                    <div class="count">5</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" class="pending-card">
                  <div class="card-content">
                    <i class="el-icon-s-custom"></i>
                    <span>预警事项</span>
                    <div class="count">3</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 授权管理 -->
        <el-row class="authorization-management">
          <el-col :span="24">
            <div class="title">授权管理</div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card shadow="hover" class="auth-card">
                  <div class="card-content">
                    <i class="el-icon-s-management"></i>
                    <span>授权管理</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 右侧信息栏 -->
    <el-row class="right-sidebar">
      <el-col :span="24">
        <el-card class="info-card">
          <div class="title">公告中心</div>
          <div class="announcement">EP采购升级改造...</div>
          <div class="time">12/31</div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="info-card">
          <div class="title">用户信息</div>
          <div class="user-info">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d456af46750173b92aec3f161e.png" />
            <span>张三</span>
          </div>
          <div class="login-time">登录时间：2023-12-31 12:31:31</div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="info-card">
          <div class="title">内部通知</div>
          <div class="announcement">EP采购升级改造...</div>
          <div class="time">12/31</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ProcurementSystem",
  methods: {
    logout() {
      // 退出逻辑
      this.$message.success("退出成功");
    },
  },
};
</script>

<style scoped>
.procurement-system {
  width: 100%;
  height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.main-content {
  display: flex;
}

.left-sidebar {
  width: 200px;
}

.left-menu {
  height: 100vh;
}

.right-content {
  flex: 1;
  padding: 20px;
}

.right-sidebar {
  width: 300px;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background: #f5f7fa;
  padding: 20px;
}

.pending-matters,
.authorization-management {
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.update-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.pending-card,
.auth-card {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-content {
  text-align: center;
}

.count {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.info-card {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin-left: 10px;
}

.login-time {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
</style>